<template>
    <div class="data-page">
        <div class="search-wrap">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="起始日期">
                    <el-date-picker v-model="value1" type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
				<el-form-item>
                    <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                    <el-button class="btn" @click="resetClick">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="data-list">
			<div class="items">
				<div class="title marg-B1 fs-16 fw-7">
					今日统计
				</div>
				<div class="flex f-be f-mi marg-B1">
					<div class="inet-box t-center" @click="dayClick" style="cursor: pointer;">
						<div class="fs-16" style="color: #2A82E4;">{{dayData.clue_total}}</div>
						<div class="t-eight fs-12">接单</div>
					</div>
					<div class="inet-box t-center">
						<div class="fs-16" style="color: #FF8D1A;">{{dayData.money_total}}</div>
						<div class="t-eight fs-12">消耗积分</div>
					</div>
				</div>
                <div class="charts-box" ref="">
                    <div ref="chartRef1" style="width: 100%;height:500px;"></div>
                </div>
				<!-- <div class="list-bar flex">
					<div class="item flex f-mi marg-R1">
						<div class="cire bg1"></div>
						<text class="fs-12 t-three marg-Lhalf">婚姻家庭</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg2"></div>
						<text class="fs-12 t-three marg-Lhalf">交通事故</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg3"></div>
						<text class="fs-12 t-three marg-Lhalf">合同纠纷</text>
					</div>
					<div class="item flex f-mi">
						<div class="cire bg4"></div>
						<text class="fs-12 t-three marg-Lhalf">刑事案件</text>
					</div>
				</div> -->
			</div>
			<div class="items">
				<div class="title marg-B1 fs-16 fw-7">
					本月统计
				</div>
				<div class="flex f-be f-mi marg-B1">
					<div class="inet-box t-center" @click="monthClick" style="cursor: pointer;">
						<div class="fs-16" style="color: #2A82E4;">{{monthData.clue_total}}</div>
						<div class="t-eight fs-12">接单</div>
					</div>
					<div class="inet-box t-center">
						<div class="fs-16" style="color: #FF8D1A;">{{monthData.money_total}}</div>
						<div class="t-eight fs-12">消耗积分</div>
					</div>
				</div>
                <div class="charts-box" ref="">
                    <div ref="chartRef2" style="width: 100%;height:500px;"></div>
                </div>
				<!-- <div class="list-bar flex">
					<div class="item flex f-mi marg-R1">
						<div class="cire bg1"></div>
						<text class="fs-12 t-three marg-Lhalf">婚姻家庭</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg2"></div>
						<text class="fs-12 t-three marg-Lhalf">交通事故</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg3"></div>
						<text class="fs-12 t-three marg-Lhalf">合同纠纷</text>
					</div>
					<div class="item flex f-mi">
						<div class="cire bg4"></div>
						<text class="fs-12 t-three marg-Lhalf">刑事案件</text>
					</div>
				</div> -->
			</div>
			<div class="items">
				<div class="title marg-B1 fs-16 fw-7">
					年度统计
				</div>
				<div class="flex f-be f-mi marg-B1">
					<div class="inet-box t-center" @click="yearClick" style="cursor: pointer;">
						<div class="fs-16" style="color: #2A82E4;">{{yearData.clue_total}}</div>
						<div class="t-eight fs-12">接单</div>
					</div>
					<div class="inet-box t-center">
						<div class="fs-16" style="color: #FF8D1A;">{{yearData.money_total}}</div>
						<div class="t-eight fs-12">消耗积分</div>
					</div>
				</div>
                <div class="charts-box" ref="">
                    <div ref="chartRef3" style="width: 100%;height:500px;"></div>
                </div>
				<!-- <div class="list-bar flex">
					<div class="item flex f-mi marg-R1">
						<div class="cire bg1"></div>
						<text class="fs-12 t-three marg-Lhalf">婚姻家庭</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg2"></div>
						<text class="fs-12 t-three marg-Lhalf">交通事故</text>
					</div>
					<div class="item flex f-mi marg-R1">
						<div class="cire bg3"></div>
						<text class="fs-12 t-three marg-Lhalf">合同纠纷</text>
					</div>
					<div class="item flex f-mi">
						<div class="cire bg4"></div>
						<text class="fs-12 t-three marg-Lhalf">刑事案件</text>
					</div>
				</div> -->
			</div>
		</div>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request"
import *as echarts from 'echarts'
import mixin from '@/assets/js/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
            value1: '',
            formInline: {
                keywords: '',
                time: '',
                category_id: '',
                city: '',
                status: ''
            },
            monthData: [],
            yearData: [],
            dayData: [],
            // monthDataY: [],
            // monthDataX: [],
            // yerDataX: [],
            // yerDataY: [],
            // dayDataX: [],
            // dayDataY: [],
			timeList: []
        }
    },
    created() {
        
    },
    mounted() {
        this.initData()
        // this.pieCharts()
        // this.dayCharts()
        // this.monthCharts()
        // this.yearCharts()
    },
    methods: {
        dayClick() {
            this.$router.push({
                path: '/clueTracking',
                query: {
                    time: 2
                }
            })
        },
        monthClick() {
            this.$router.push({
                path: '/clueTracking',
                query: {
                    time: 3
                }
            })
        },
        yearClick() {
            this.$router.push({
                path: '/clueTracking',
                query: {
                    time: 4
                }
            })
        },
        queryClick() {
            let begin_date = this.formattedDate(this.value1[0])
            let end_date = this.formattedDate(this.value1[1])
            this.$router.push({
                path: '/statisticsDetail',
                query: {
                    begin_date,
                    end_date
                }
            })
        },
        resetClick() {

        },
		getClueData() {  
            // 线索分类
            request({
                url: '/clue/category',
                method: 'get',
                data: {
                    keywords: this.formInline.keywords,
                    time: this.formInline.time,
                    category_id: this.formInline.category_id,
                    city: this.formInline.city,
                    status: this.formInline.status
                }
            }).then(res => {
                if(res.code == 200) {
                    this.categoryList = res.data.list || []
                    // this.categoryList = this.modifyArray(res.data.list)
                }
            })

            // 线索抢单状态
            request({
                url: '/config/clue/status',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.orderList = res.data.list || []
                }
            })
            // 行政区
            request({
                url: '/config/region',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.areaList = this.modifyArray(res.data.list)
                }
            })
            // 线索搜索时间
            request({
                url: '/config/clue/time',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.timeList = res.data.list || []
                }
            })
            // /config/note
            request({
                url: '/config/note',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.noteList = res.data.list || []
                }
            })

            // 等级
            request({
                url: '/config/level',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.levelList = res.data.list || []
                }
            })
        },
        dayCharts(data) {
            let myChart = echarts.init(this.$refs.chartRef1);
            let that = this
            myChart.setOption({
                legend: {
					icon: 'circle',
                    top: 'bottom'
                },
                label: {
                    formatter: '{d}%',
                },
                series: [
                    {
                        type: 'pie',
                        radius: [0, '60%'],
                        selectedMode: 'single',
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ["#7948EA","#FF8D1A","#FFC300","#43CF7C","#fc8251","#5470c6","#9A60B4",
									   "#ef6567",
									   "#f9c956",
									   "#3BA272"
									];
									return colorList[colors.dataIndex];
								}
							},
						},
                        data: data
                    }
                ]
            })            
            myChart.on('click', function (params) {//点击地图触发事件
                that.$router.push({
                    path: '/clueTracking',
                    query: {
                        categoryName: params.data.name
                    }
                })
            });
        },
        monthCharts(data) {
            let monthDataEchart = echarts.init(this.$refs.chartRef2);
            let that = this
            monthDataEchart.setOption({
                legend: {
					icon: 'circle',
                    top: 'bottom'
                    // top: '5%',
                    // orient: 'vertical',
                    // left: 'left'
                },
                label: {
                    formatter: '{d}%',
                },
                series: [
                    {
                        type: 'pie',
                        radius: [0, '60%'],
                        selectedMode: 'single',
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ["#7948EA","#FF8D1A","#FFC300","#43CF7C","#fc8251","#5470c6","#9A60B4",
									   "#ef6567",
									   "#f9c956",
									   "#3BA272"
									];
									return colorList[colors.dataIndex];
								}
							},
						},
                        data: data
                    }
                ]
            })
            monthDataEchart.on('click', function (params) {//点击地图触发事件
                that.$router.push({
                    path: '/clueTracking',
                    query: {
                        categoryName: params.data.name
                    }
                })
            });
        },
        yearCharts(data) {
            let yearDataEchart = echarts.init(this.$refs.chartRef3);
            let that = this
            yearDataEchart.setOption({
                legend: {
					icon: 'circle',
                    top: 'bottom'
                },
                label: {
                    formatter: '{d}%',
                },
                series: [
                    {
                        type: 'pie',
                        radius: [0, '60%'],
                        selectedMode: 'single',
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ["#7948EA","#FF8D1A","#FFC300","#43CF7C","#fc8251","#5470c6","#9A60B4",
									   "#ef6567",
									   "#f9c956",
									   "#3BA272"
									];
									return colorList[colors.dataIndex];
								}
							},
						},
                        data: data
                    }
                ]
            })
            yearDataEchart.on('click', function (params) {//点击地图触发事件
                that.$router.push({
                    path: '/clueTracking',
                    query: {
                        categoryName: params.data.name
                    }
                })
            });
        },
        initData() {
            // 年度统计
            request({
                url: '/user/charts/year',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.yearData = res.data || []
                    let catList = res.data.category_list
                    let arr = []
                    for(let key in catList) {
                        arr.push({
                            'name': catList[key].category_title,
                            'value': catList[key].total
                        })
                    }
                    this.yearCharts(arr)
                }
            })
            // 月度统计
            request({
                url: '/user/charts/month',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.monthData = res.data || []
                    let catList = res.data.category_list
                    let arr = []
                    for(let key in catList) {
                        arr.push({
                            'name': catList[key].category_title,
                            'value': catList[key].total
                        })
                    }
                    this.monthCharts(arr)
                    
                }
            })
            // 今日统计
            request({
                url: '/user/charts/day',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.dayData = res.data || []
                    let catList = res.data.category_list
                    let arr = []
                    for(let key in catList) {
                        arr.push({
                            'name': catList[key].category_title,
                            'value': catList[key].total
                        })
                    }
                    this.dayCharts(arr)
                }
            })
        },
        timeData() {
            request({
                url: '/user/charts/range',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.yearData = res.data || []
                    let catList = res.data.category_list || []
                    if(catList.length > 0) {
                        catList.forEach((item) => {
                            this.$set('name',item.category_title)
                            this.$set('value',item.total)
                        })
                        this.yearCharts(catList)
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.data-page{
	.data-list{
		display: flex;
		justify-content: space-between;
		.items{
			width: 32.5%;
			height: 800px;
			padding: 30px;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.05);
			.title{
				text-align: center;
				color: #1F2E54;
				font-weight: 700;
			}
			.inet-box{
				width: 48%;
				height: 66px;
				padding: 10px 0;
				text-align: center;
				line-height: 25px;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(229, 229, 229, 1);
			}
			.charts-box{
				height: 200rpx;
			}
			.list-bar{
				.cire{
					width: 16rpx;
					height: 16rpx;
					border-radius: 50rpx;
				}
				.bg1{
					background: #7948EA;
				}
				.bg2{
					background: #FF8D1A;
				}
				.bg3{
					background: #FFC300;
				}
				.bg4{
					background: #43CF7C;
				}
			}
		}
	}
}
/deep/.search-wrap{
    margin: 20px 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background: #F5F6FA;
    .el-form-item{
        margin-bottom: 0;
    }
    .btn{
        padding: 0;
        width: 80px;
        height: 32px;
        border: none;
        // background: #016aed;
    }
    .bg-blue{
        color: #ffffff;
        background: #2967E3;
    }
    .el-select {
        width: 100%;
    }
    .el-input{
        width: 150px;
        .el-input__inner{
            height: 32px;
        }
    }
    .el-date-editor{
        width: 100%;
        .el-input{
            width: 100%;
        }
        .el-input__prefix{
            .el-input__icon{
                line-height: 32px;
            }
        }
        .el-input__suffix{
            .el-input__suffix-inner{
                .el-input-circle-close{
                    line-height: 32px;
                }
            }
        }
    }
}
</style>